<template>
  <transition @before-enter="initPos" @enter="handleEnter">
    <div class="base" v-show="visible" :style="styles">垃圾</div>
  </transition>
</template>
<script>
export default {
  props: {
    from: {
      default: () => ({ x: 0, y: 0 })
    },
    to: {
      default: () => ({ x: 0, y: 0 })
    }
  },
  data() {
    return {
      contentList: [1, 2, 3, 4, 5],
      visible: false
    }
  },
  computed: {
    absPos() {
      return { x: this.from.x, y: this.absPos.y };
    },
    toPos() {
      return { x: this.to.x, y: this.to.y };
    },
    styles() {
      return {
        top: this.to.y+'px',
        left: this.to.x+'px',
      }
    }
  },
  mounted() {
    document.body.appendChild(this.$el);
    this.visible = true
  },
  methods: {
    initPos(el) {
      let x = this.from.x - this.to.x;
      let y = this.from.y - this.to.y;
      el.style.transform = `translate(${x}px,${y}px)`
    },
    handleEnter(el) {
      document.body.offsetHeight
      el.style.transform = `translate(0,0)`
      el.addEventListener('transitionend', () => { this.$destroy() })
    },
  },
  beforeDestroy() {
    this.$el.parentNode.removeChild(this.$el);
  }
};
</script>

<style scoped>
.base {
  position: absolute;
  width: 4em;
  height: 2em;
  font-weight: bold;
  text-align: center;
  line-height: 2em;
  border-radius: 10px;
  font-size: 24px;
  background: red;
  color: #fff;
  transition: all 3s linear;
}
</style>
